<template>
  <div class="outbox">
    <img src="@/assets/vote/home_vote.png" alt="" class="vote" />
    <div class="login">
      <van-nav-bar left-arrow @click-left="$router.go(-1)" />
      <div class="container">
        <div class="title">
          <h3 class="denglu">登录</h3>
          <!-- <p>未注册的手机号登录后将自动注册</p> -->
        </div>

        <div class="form">
          <div class="form-item">
            <input class="inp" maxlength="11" placeholder="请输入账号" type="text" id="account" />
          </div>
          <div class="form-item">
            <input type="password" name="" class="inp" id="psd" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
              onpaste="return false" oncontextmenu="return false" maxlength="12" placeholder="请输入密码" />
            <img src="@/assets/vote/login/DisplayPassword.png" alt="显示密码" class="isshow" id="isshow"
              @click="isshow()" />
            <img src="@/assets/vote/login/ShowPassword.png" alt="" class="isshow" id="noshow" style="display: none"
              @click="noshow()" />
          </div>
          <div class="form-item">
            <input class="inp" maxlength="5" placeholder="请输入图形验证码" type="text" id="inverify" />

            <!-- <img src="@/assets/code.png" alt=""> -->
            <!-- @inputChanged="upVerifity" 将子组件传输过来的验证码值传输过来 -->
            <VerificationCode @inputChanged="upVerifity" ref="child" :showverifity='misstime'></VerificationCode>
          </div>

          <!-- <div class="form-item">
          <input class="inp" placeholder="请输入短信验证码" type="text"  id="myverifity"/>
          <button>获取验证码</button>
        </div> -->
        </div>

        <div class="login-btn" id="loginBtn" @click="login">登录</div>
      </div>
    </div>
    <!-- 清除浮动效果的高度塌陷 -->
    <div style="clear: both"></div>
  </div>
</template>

<script>
import VerificationCode from "@/components/VerificationCode/VerificationCode.vue";
import api from "@/api/index.js";
import { encryption } from "@/utils";

export default {
  // 这里记得加name，否则会报错，由于需要两个单词，一般会直接在后面加个index，架子首页
  name: "LoginPage",
  data() {
    return {
      verifity: "",
      misstime: 0, //记录错误次数
    };
  },
  components: {
    VerificationCode,
  },
  created() {
    this.keyupSubmit(); //创建回车登录方法
  },
  methods: {
    //监听回车 执行登录操作
    keyupSubmit() {
      document.onkeydown = (e) => {
        let _key = window.event.keyCode;
        //!this.clickState是防止用户重复点击回车
        if (_key === 13 && !this.clickState) {
          this.login();
        }
      };
    },

    upVerifity(e) {
      //声明这个函数
      // console.log('upVerifity',e);
      // 将子组件输入的验证码 赋值到父元素的组件中
      this.verifity = e;
      // 将传递过来的验证码数值 打印出来
      console.log(this.verifity);
    },
    login() {
      const account = document.getElementById("account").value;
      // // const psd = document.getElementById("psd").value;
      const psd = encryption(document.getElementById("psd").value); //密码加密
      // console.log(account);
      // console.log(psd);

      var mydate = new FormData();
      mydate.append("account", account);
      mydate.append("password", psd);
      mydate.append("identity", this.identity);
      // console.log(this.upVerifity);
      // console.log(this.verifity)
      console.log(document.getElementById("inverify").value);
      let inverify = document.getElementById("inverify").value; //获取输入的验证码
      console.log(mydate);

      if (inverify == this.verifity) {
        //如果跟图形化验证码相同
        console.log("登录成功");

        window.location.href = "./voting";
        api
          .login(mydate)
          .then((res) => {
            if (res.data.status == 200) {
              //如果请求成功
              window.location.href = "./voting";
            } else if (res.data.status != 200) {
              this.misstime++
              console.log(this.misstime);

              alert("账号密码错误！");
              console.log(res.data.msg);
              this.misstime++; //账号密码登录失败 自加1
              console.log("misstime=" + this.misstime);
            } else {
              console.log("登录失败");
              this.misstime++
              console.log(this.misstime);
            }
          })
          .catch((error) => {
            console.log("登录失败");
            console.log(error);
          });
      } else {
        alert("验证码错误")

        this.misstime++
        // console.log(this.misstime);
      }

    },
  },
  setup() {
    //显示密码功能
    function isshow() {
      const isshow = document.getElementById("isshow");
      isshow.style.display = "none";
      const noshow = document.getElementById("noshow");
      noshow.style.display = "";
      const psd = document.getElementById("psd");
      psd.type = "text";
    }
    // 隐藏密码功能
    function noshow() {
      const isshow = document.getElementById("isshow");
      isshow.style.display = "";
      const noshow = document.getElementById("noshow");
      noshow.style.display = "none";
      const psd = document.getElementById("psd");
      psd.type = "password";
    }

    return {
      //通过return 将书写的功能 和对应的属性导出
      isshow,
      noshow,
    };
  },
};
</script>

<style lang="less" scoped>
.vote {
  position: relative;
  left: 4vw;
  height: 45vw;
}

.outbox {
  display: flex;
  // justify-content: center;
  align-items: center;
  height: 100vh; //活动显示屏高度
  background-color: #6abaf8;
}

.login {
  // margin: 0 20%;
  // border: solid #e4e5ec 0.5px;
  box-shadow: rgba(97, 168, 224, 0.35)-4px 12px 38px 11px;
  background-color: #ffffff;
  display: flex;
  // float: right;
  width: 500px;
  // position: absolute;
  // right: 5vw;
}

.container {
  padding: 49px 29px;
  width: auto;
  width: 470px;

  .title {
    margin-bottom: 20px;

    h3 {
      font-size: 26px;
      font-weight: normal;
    }

    p {
      line-height: 40px;
      font-size: 14px;
      color: #b8b8b8;
    }
  }

  .form-item {
    border-bottom: 1px solid #f3f1f2;
    padding: 8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;

    .inp {
      display: block;
      border: none;
      outline: none;
      height: 32px;
      font-size: 14px;
      flex: 1;
    }

    button {
      height: 31px;
      border: none;
      font-size: 13px;
      color: #cea26a;
      background-color: transparent;
      padding-right: 9px;
    }
  }

  .login-btn {
    width: 100%;
    height: 42px;
    margin-top: 39px;
    background: linear-gradient(90deg, #00cf22, #00be1f);
    color: #fff;
    border-radius: 39px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.denglu {
  margin-top: 0;
}

.isshow {
  width: 25px;
  /* 设置手型鼠标 */
  cursor: pointer;
  margin-left: 10px;
}
</style>